import React from "react";
import {createStyles} from "antd-style";

const useStyles = createStyles(({css, token}) => {
    return {
        container: css`
            position: fixed;
            z-index: 5;
            left: 0;
            top: 0;
            padding: 5px;
            font-size: 15px;
            background-color: transparent;
            backdrop-filter: brightness(90%) blur(10px);
        `,
    }
})

interface Props {
    props: {
        photoInfo: [{name: string, size: number}],
        index: number
    }
}

const ContainerInfo: React.FC<Props> = (props) => {
    const {photoInfo, index} = props.props
    const styles = useStyles().styles;

    return (
        <div className={styles.container}>
            <p>索引：{index}</p>
            <p>名称：{photoInfo[index].name}</p>
            <p>数量：{photoInfo[index].size}</p>
        </div>
    )
}

export default ContainerInfo;
